var app = app || {};
app.easeOutCss = {};
app.easeOutCss.ballX = 150;
app.easeOutCss.ballY = 150;
app.easeOutCss.ballX2 = 150;
app.easeOutCss.ballY2 = 150;
app.easeOutCss.duration = 2;
app.easeOutCss.fps = 24;
app.easeOutCss.move;

(function($) {

	$(function() {
		var $body = $('body');
		$body.bind('touchstart', touchPoint);
		$body.bind('click', clickPoint);
		$body.bind('touchmove', movePoint);
	});

	function clickPoint(e) {
	}

	function touchPoint(e) {
		var easeOut = app.easeOutCss;
		var $ball = $('#ball');
		var duration = 1 / app.easeOutCss.fps;
		$ball.css('-webkit-transition-duration', duration + 's');
		if (easeOut.move) {
			clearInterval(easeOut.move);
			easeOut.move = null;
		}
		
		var touch = event.touches[0];
		app.easeOutCss.move = setInterval(function() {
			if (easeOut.ballX2 || easeOut.ballY2) {
				follow(easeOut.ballX2,easeOut.ballY2);
			}
		}, duration * 1000);
	}

	function movePoint(e) {
		e.preventDefault();
		var touch = event.touches[0];
		var easeOut = app.easeOutCss;
		
		easeOut.ballX2 = touch.pageX;
		easeOut.ballY2 = touch.pageY;
	}

	function follow(x, y) {
		var $ball = $('#ball');
		$ball.css('left', x - 15);
		$ball.css('top', y - 15);
	}
})(jQuery);